const app = new Vue({
	el:"#app",
	data:{
		books:[
			{id:1,name:'Vue实战',date:'2020-9-17',price:12.00,count:1},
			{id:2,name:'php实践',date:'2020-9-12',price:42.00,count:1},
			{id:3,name:'mysql优化',date:'2020-9-11',price:22.00,count:1},
			{id:4,name:'js编程艺术',date:'2020-9-13',price:13.00,count:1},
		]
	},
	methods:{
		decrement(index){
			this.books[index].count--;
		},
		increment(index){
			this.books[index].count++;
		},
		// getFixnum(index){
		// 	return '$'+this.books[index].price.toFixed(2);
		// }
		// 老师的写法是
		// getFixnum(price){
		// 	return '$'+price.toFixed(2);
		// }
		// 前端是{{getFixnum(book[index].price)}}
		// 它是把需要的改变状态的值传递到函数中,这样更好些
	},
	filters:{
		showPrice(price){
			return '$'+ price.toFixed(2);
		}
	},
	computed:{
		totalPrice(){
			let sum = 0;
			for(let item of this.books){
				sum += item.price*item.count;
			}
			return sum;
		}
	}
})
// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程/函数式编程
			// 区分方式 第一公民:对象/函数  